<template>
  <div class="dashboard-container" >
    <EasyTable
      :fetchFun="getTableData"
      :columns="tableCols"
      query="name=456"
      @selection-change="tableSelection = $event"
      @current-change="tableCurrentRow = $event"
      ref="easyTable"
    >
      <div slot="tool">
        <el-button type="primary" @click="delTableData">删除</el-button>
        <el-button type="primary" @click="delCurrentRow">单选删除</el-button>
        <el-button type="primary" @click="delCurrentRow">单选删除</el-button>
      </div>
      <template >
        <el-table-column
          type="selection"
        >
        </el-table-column>
        <el-table-column
          type="index"
        >
        </el-table-column>
        <el-table-column
          prop="age"
          label="年龄"
        >
        </el-table-column>
      </template>
    </EasyTable>
  </div>
</template>
<style lang="scss" scoped>

</style>
<script>
import EasyTable from "@/components/EasyTable/index.vue"
export default {
  name: "Dashboard",
  components:{
    EasyTable
  },
  data(){
    return {
      tableData:Array.from({ length: 235 }).map(item=>{
        return {
          name:"小米",
          age:Math.random().toString().slice(-3),
          id:Math.random()
        }
      }),
      newTodoText:"test",
      col:"Invalid Component definition",
      tableSelection:[],
      tableCurrentRow:"",
      tableCols:[
        {
          type:"selection"
          ,width:50
        },
        {
          prop:"id",
          label:"年龄"
        },
        {
          prop:"name",
          label:"操作",
          render:(h,{ data , index , row ,column})=>{
            return [
              <el-button type="primary"  vOn:click_stop={ this.setTest.bind(this, data ) }>增加</el-button>,
            ]  
                
           
          }
        }
      ]
    }
  },
  methods:{
    setTest(row){
      console.log( row )
    }
    ,getTableData({ page , pageSize , query }){
      
      return new Promise((resolve)=>{
        setTimeout(()=>{
          const res = { code: 200 , data:{},msg:"获取成功" }
          const resData = res.data
          resData.list  = Array.from({ length: 10  }).map((item , index)=>{
            return {
              name:"小米",
              age:Math.random().toString().slice(-3),
              id:(index + 1) + ((page -1) * pageSize)
            }
          });
          resData.totalPage = 10
          resData.curPage = page
          resolve( res )
        },1200)
      })
    }
    // 删除多选测试
    ,delTableData(){
      const selLen = this.tableSelection.length
      if( selLen ){
        this.$confirm(`你确定删除${ selLen === 1 ? '此':'选中的' }选项吗？`)
        .then(()=>{
          this.$refs.easyTable.delSelection().then(delRows=>{
            console.log( delRows )
          })
        }).catch(()=>{})
      }else{
        this.$alert("请选择需要删除的选项")
      }
    }
    // 删除单选测试
    ,delCurrentRow(){
      if( this.tableCurrentRow ){
        this.$confirm(`你确定删除此选项吗？`)
        .then(()=>{
          this.$refs.easyTable.delCurrentRow().then(delRow=>{
            console.log( delRow )
          })
        }).catch(()=>{})
      }else{
        this.$alert("请选择需要删除的选项")
      }
    }
  }
  
}
</script>
